<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('写RFID')"/>
    <style>
        input {
            width: 200px;
            height: 30px;
            border: 1px solid gray;
            outline: none;
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            padding-left: 5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        #centerDiv {
            margin: 0 auto;
            width: 550px
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-user-writeUserRfid">
        <input name="userId" type="hidden" th:value="${user.userId}"/>

        <br/> &nbsp;
        <span style="color: green; "><center>写入RFID成功！</center></span>

        <br/> &nbsp; <br/> &nbsp;

        <span>
                <center>
                    <span style="color: blue; ">登录名称：</span><input name="loginName" th:value="${user.loginName}"
                                                                   type="text" disabled="disabled"/>
                    <span style="color: blue; ">RFID：</span><input name="rfid" th:value="${user.rfid}" type="text"
                                                                   disabled="disabled"/>
                </center>
        </span>

        <br/> &nbsp; <br/> &nbsp; <br/> &nbsp;

        <div id="centerDiv">
            <div class="progress progress-striped active">
                <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0"
                     aria-valuemax="100" style="width:0%;">
                    <span id="proglabel">正在启动，请稍后......</span>
                </div>
            </div>
        </div>


    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">


    $(document).ready(function () {
        var value = 0;
        var time = 3;

        //百分数增加，0-30时为红色，30-60为黄色，60-90为蓝色，>90为绿色
        function increment() {
            $("#prog").stop();
            value += 1;
            $("#prog").css("width", value + "%").text(value + "%");
            if (value >= 0 && value <= 30) {
                $("#prog").addClass("progress-bar-danger");
            } else if (value >= 30 && value <= 60) {
                $("#prog").removeClass("progress-bar-danger");
                $("#prog").addClass("progress-bar-warning");
            } else if (value >= 60 && value <= 90) {
                $("#prog").removeClass("progress-bar-warning");
                $("#prog").addClass("progress-bar-info");
            } else if (value >= 90 && value < 100) {
                $("#prog").removeClass("progress-bar-info");
                $("#prog").addClass("progress-bar-success");
            } else {
                return;
            }
            st = setTimeout(increment, time);
        }
        increment();

    });

    /*==========================================*/


    $("#form-user-writeUserRfid").validate({
        rules: {
            password: {
                required: true,
                minlength: 5,
                maxlength: 20
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(ctx + "system/user/writeUserRfid", $('#form-user-writeUserRfid').serialize());
        }
    }
</script>
</body>

</html>
